<link rel="stylesheet" href="//at.alicdn.com/t/font_2257859_xuermh6cd8q.css">
<style>
    .logo a{
        color: #ccc;
    }
    .navBox{
        width: 70%;
        height: 100%;
    }
    .navBox ul{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .navBox ul li{
        cursor: pointer;
        text-align: center;
        flex: 1;
    }
    .navBox .navCont{
        position: absolute;
        left:0;
        width: 100vw;
        height: 200px;
        background-color: #efefef;
        display: none;
        z-index: 1
    }
    .contList{
        display: none;
        font-size: 50px;
        color: #000;
        text-align: center;
    }

    .contList{
        display: flex;
        justify-content: center
    }
    .contList .smallPro{
        width: 100px;
        border: solid 1px #eee;
        box-sizing: border-box;
        text-align: center;
        font-size: 14px;
        margin: 0 20px;
    }
    .contList .smallPro img{
        width: 80%;
    }
    .contList .smallPro p{
        margin: 0;padding: 0;
    }
    .contList .smallPro p:nth-child(3){
        margin: 10px 0 20px;
        line-height: 16px;
        font-size: 12px;
        height: 16px;
        overflow: hidden;
        color: #999;
    }
    .contList .smallPro p:nth-child(4){
        color: #d44d44;
        font-size: 20px;
        font-weight: bold;
    }
    .login{
        display: inline-block;
        height: 100%;
        line-height: 50px;
    }
    .login a:nth-child(2){
        position: relative;
        display: block;
        cursor: pointer;
    }
    .login a:nth-child(2) em{
        font-style: normal;
        width: 40px;height:40px;
        line-height: 40px;
        background: #333;
        position: absolute;
        top:50px;left: 0px;
        text-align: center;
        z-index: 9;
        border-radius:10px;
        display: none;
    }
    .cart{
        height: 100%;
        display: flex;
    }
    .cart p{
        margin: 0;
    }
    .cart a{
        color: #ccc;
        margin: 0 10px;
    }
    .shopping{
        position: relative;
        height: 100%;
        display: block;
    }
    .shopping span{
        line-height: 50px;
    }
    .cartCont{
        position: absolute;
        width: 400px;
        min-height: 300px;
        background: #fff;
        border-radius: 10px;
        border: solid 2px #aaa;
        right:0;top:50px;
        z-index: 9;
        display: none;
    }
    .empty{
        text-align: center;
    }
    .empty span{
        font-size: 100px;
        line-height: 200px;
        display: block;
    }
    .empty p:nth-child(2){
        color: #000;
    }
    .cartList{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 300px;
        display: none;
    }
    .cartList .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }
    .cartList .list img{
        width: 100px;
        height:100px;
        border: solid 1px #ccc;
        margin-right: 20px;
    }
    .cartList .list .cartInfo h3{
        margin: 0;
        font-size: 18px;
        color: #000;
    }
    .cartList .list .cartInfo p:nth-child(2){
        margin: 10px 0;
        font-size: 16px;
    }
    .cartList .list .cartInfo p:nth-child(3){
        font-size: 20px;
        color: #d44d44;
    }
    .cartList .list em{
        height: 20px;width: 20px;
        display: block;border: solid 1px #aaa;
        border-radius: 6px;
        line-height: 20px;text-align: center;
        color: #666;
        font-style: normal;
    }
    .cartList .listFoot{
        border-top: solid 1px #aaa;
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
    .listFoot p{
        margin: 0;
        line-height: 16px;
        height: 40px;
    }
    .listFoot p span{
        line-height: 28px;
    }
    .listFoot button{
        height: 50px;
        width: 140px;
        border: solid 1px #3d60dc;
        background: #6391f2;
        font-size: 20px;
        border-radius: 10px;
        color: #fff;
    }
    .listFoot .allProPrice{
        color: #d44d44;
        font-size: 20px;
        font-weight: bold;
    }

</style>
<div class="logo">
    <a href="http://localhost/元培学院计科大前端实训/NZ001/index.html">LOGO</a>
</div>
<div class="navBox">
    <ul>
        <li class="goHome">首页</li>
        <li>坚果手机</li>
        <li>TNT</li>
        <li>音箱</li>
        <li>投影</li>
        <li>服饰</li>
        <li>家用电器</li>
        <li>个人洗护</li>
        <li>服务</li>
    </ul>
    <div class="navCont">
        <div class="contList" name="首页">
            <div class="smallPro"><a href="http://localhost/元培学院计科大前端实训/NZ001/detail/index.html#12hg3f1y">
                <img src="https://resource.smartisan.com/resource/4d9e7683b590cf4a6996d3b13136bcf8.png?x-oss-process=image/resize,w_432/format,webp" alt="">
                <p>坚果手机</p>
                <p>坚果手机坚果手机坚果手机坚果手机坚果手机</p>
                <p>￥4499.00</p>
            </a></div>
        </div>
        <div class="contList" name="坚果手机">
            坚果手机的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="TNT">
            TNT的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="音箱">
            音箱的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="投影">
            投影的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="服饰">
            服饰的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="家用电器">
            家用电器的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="个人洗护">
            个人洗护的下拉菜单的详细内容布局
        </div>
        <div class="contList" name="服务">
            服务的下拉菜单的详细内容布局
        </div>
    </div>
</div>
<div class="cart">
    <div class="login">
        <a href="http://localhost/元培学院计科大前端实训/NZ001/login/index.html"><span class="iconfont icon-denglu1"></span></a>
        <a style="display:none">
            <span>临时用户</span>
            <em><i class="iconfont icon-tuichu"></i></em>
        </a>
    </div>
    <div class="shopping">
        <a style="display:none" href="http://localhost/元培学院计科大前端实训/NZ001/cart/index.html" class=""><span class="iconfont icon-gouwuche"></span></a>
        <div class="cartCont">
            <div class="empty">
                <span class="iconfont icon-gouwuche"></span>
                <p>购物车为空</p>
                <p>您还没有选购任何商品，现在前往商城选购吧！</p>
            </div>
            <div class="cartList">
                <div class="cartListCont"></div>
                <div class="listFoot">
                    <p>共 <span class="sum">1</span> 件商品<br>合计：<span class="allProPrice">1999.00</span></p>
                    <button>去购物车</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://localhost/元培学院计科大前端实训/NZ001/public/renderCart.js"></script>
<script>
    if(location.pathname.includes("cart")){
        $(".shopping").hide();
    }else{
        $(".shopping").mouseenter(function(){
            $(".cartCont").show();
        })
        $(".shopping").mouseleave(function(){
            $(".cartCont").hide();
        })
        renderCart();
    }
    
</script>

<script>
    // 先获取用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 处理用户信息
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }
    // 遍历用户信息
    var onoff = false;
    for(var i=0;i<uMsg.length;i++){
        // 判断是否有登录用户
        if(uMsg[i].isLogin === "ok"){
            onoff = true;
            break;
        }
    }
    // 有登录用户
    if(onoff){
        // 隐藏 登录选项
        $(".login").find("a").eq(0).hide();
        // 显示用户名容器，设置用户名
        $(".login").find("a").eq(1).show().find("span").html(uMsg[i].un);
        // 显示购物车选项
        $(".cart").find("a").eq(2).show();
    }

    // 登录成功之后，退出按钮的显示或隐藏
    // 鼠标进入用户名，显示退出
    $(".login").find("a").eq(1).mouseover(function(){
        $(this).find("em").show();
    })
    // 鼠标离开用户名，隐藏退出
    $(".login").find("a").eq(1).mouseout(function(){
        $(this).find("em").hide();
    })
    // 鼠标点击退出，执行已退出功能
    $(".login").find("a").find("em").click(function(){
        // 将登录标志，清空
        uMsg[i].isLogin = "";
        // 将数据覆盖回去
        localStorage.setItem("userMsg",JSON.stringify(uMsg));
        // 显示登录按钮
        $(".login").find("a").eq(0).show();
        // 隐藏用户信息
        $(".login").find("a").eq(1).hide();
        // 隐藏购物车按钮
        $(".cart").find("a").eq(2).hide();
        // console.log(location);
        // 判断当前页面是否在购物车页面，如果在购物车页面，那么退出之后，自动回到首页，非购物车页面，无序切换到首页
        if(location.pathname.includes("cart")){
            location.href = "http://localhost/元培学院计科大前端实训/NZ001/index.html";
        }
    })
</script>

<script>
    $(".navBox").find("li").mouseenter(function(){
        // console.log(this);
        $(".navCont").show();
        // console.log($(this).html());
        $(".contList[name="+ $(this).html() +"]").show().siblings().hide();
    })

    $(".navBox").mouseleave(function(){
        // console.log("出来了")
        $(".navCont").hide();
    })

    $(".goHome").click(function(){
        location.href = "http://localhost/%E5%85%83%E5%9F%B9%E5%AD%A6%E9%99%A2%E8%AE%A1%E7%A7%91%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%AE%9E%E8%AE%AD/NZ001/index.html"
    })
</script>